<template>
	<Row class="rowboxs">
		<Col span="24" class="perth4">
            <h3>岗位人员信息（实时）</h3>
        </Col>
        <Col span="24" v-for="(item,index) of columns" :class="item.cls">
            <Card>
                <p slot="title">{{item.title}}</p>
                <div v-for="(person,index) of item.persons" class="personspan">
                    <span>{{person.weizhi}}</span>
                    <span>{{person.name}}</span>
                    <span style="color:#FF5500;">{{person.phone}}</span>
                </div>
            </Card>
        </Col>
    </Row>
</template>
<script>
export default {
  data () {
    return {
      columns: [
        {
          "title": "造气车间-气味超标",
          "position": "位置：1号锅炉",
          "content": "次预警",
          "degree": 4,
          "cls": "clr",
          "persons": [{
            "name": "彭万里",
            "weizhi": "1号锅炉",
            "phone": "13583148222"
          }, {
            "name": "贾德善",
            "weizhi": "2号锅炉",
            "phone": "13105319669"
          }
          ],
          "ofe": 0
        },
        {
          "title": "压力泵车间-超压",
          "position": "位置：3号压力泵",
          "content": "次预警",
          "degree": 3,
          "cls": "clr",
          "persons": [{
            "name": "蔡德霖",
            "weizhi": "1号压力泵",
            "phone": "15020010899"
          }, {
            "name": "孙宏坤",
            "weizhi": "2号压力泵",
            "phone": "15005314827"
          }, {
            "name": "吕德榜",
            "weizhi": "3号压力泵",
            "phone": "15054165165"
          }
          ],
          "ofe": 1
        },
        {
          "title": "废水处理-超标排放",
          "position": "数据：Vocs",
          "content": "次预警",
          "degree": 2,
          "cls": "mtop",
          "persons": [{
            "name": "谭平山",
            "weizhi": "1号管道",
            "phone": "15064138234"
          }, {
            "name": "朱希亮",
            "weizhi": "2号管道",
            "phone": "15098867099"
          }
          ],
          "ofe": 0
        },
        {
          "title": "第四厂区-视频入侵",
          "position": "数据：信息监控",
          "content": "次预警",
          "degree": 1,
          "cls": "mtop",
          "persons": [{
            "name": "年广嗣",
            "weizhi": "4长区监控",
            "phone": "15508666680"
          }
          ],
          "ofe": 1
        }
      ]
    };
  }
};
</script>
<style scoped>
    .rowboxs{
        padding: 20px;
        padding-top: 5px;
    }
    .perth4{
        line-height: 35px;
    }
    .personspan span{
        width: 32%;
        display: inline-block;
    }
</style>